<template>
  <div id="hotMovies" >
    <h2 class="fontsize-24 line">{{$t('m.hot')}}<router-link to="/home/movie" style="color: #0a80c1">{{$t('m.movies')}}</router-link></h2>
    <div id="home-movie" >
      <a v-for="item in movie.slice(0,7)" :key="item.id"><router-link :to="{name:'movieInfo',params: {id: item.movieNameEn}}">
        <div class="upImgCom" >
<!--          <span class="top"/>-->
<!--          <span class="topNum" :style="{color: item.topCol}">{{item.movieTop}}</span>-->
          <img class="home-movie-box" :src="item.movieImg" alt=""/>
        </div>
        <p class="tab-hidden titleName" style="font-weight: 500;margin: 5px 0">{{item.movieName}}</p>
        <div class="lab-hidden">
          <span class="lab" v-for="lab in item.movieGen.split(' ').slice(0, 3)" :key="lab.id">{{lab}}</span>
        </div>
      </router-link>
      </a>
    </div>
  </div>
</template>

<script>

  import api from "../../model/api";

  export default {
    name: 'hotMovies',
    data(){
      return{
        movie:[],

      }
    },
    methods:{
      getMovies(){
        api.getMovies().then(res => {
          this.movie = res.data
          return res.data
        })
      },
    },
    created() {
      this.getMovies()
    },
  }

</script>

<style lang="less" scoped>
  #hotMovies{
    font-size: 0;
    /*width: 100%;*/
    /*height: 345px;*/
    /*background-color: #4dffd3;*/
    /*overflow: hidden;*/
    margin-top: 60px;
    /*background-color: red;*/
  }
  /******************/
  h2{
    margin-bottom: 10px;
  }
  .boxOfi{
    position: absolute;
    right: 15px;
  }

  .top{
    width: 0;
    height: 0;
    border-left: 30px solid #313131;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #313131;
    position: absolute;
    border-radius: 6px 0 0 0;
    z-index: +1;
  }
  .topNum{
    position: absolute;
    font-size: 36px;
    font-style: italic;
    font-weight: 900;
    top: -5px;
    left: 2px;
    text-shadow: 3px 1px 0 #000000;
    z-index: +2;
  }
  #home-movie {
    display: flex;
    flex-wrap: wrap;
    /*background-color: red;*/

    .home-movie-box {
      width: 170px;
      height: 238px;
      /*background-color: #ffad4b;*/
      border-radius: 6px;
      transition: all 0.1s ease-in-out;
    }
    /*.home-movie-box:hover{*/
    /*  box-shadow: -5px 5px 0 #b4b4b4;*/
    /*  transform: translate3d(5px, -5px, 0);*/
    /*}*/
    .upImgCom{
      border-radius: 6px;
      margin-right: 12.4px;
      transition: all 0.1s ease-in-out;
    }
    .upImgCom:hover{
      box-shadow: -5px 5px 0 #0a80c1;
      transform: translate3d(5px, -5px, 0);
    }
    a {
      display: inline-block;
      position: relative;
      margin-bottom: 5px;
    }
  }
</style>
